<template>
  <div class="wrap">
    <div class="labelBox">
      <el-form :inline="true" :model="params" class="demo-form-inline">
        <div>
          <el-form-item el-form-item label="姓名">
            <el-input v-model="params.name" placeholder="昵称/姓名"></el-input>
          </el-form-item>
          <el-form-item el-form-item label="电话">
            <el-input v-model="params.name" placeholder="电话"></el-input>
          </el-form-item>
          <el-form-item el-form-item label="区域">
            <el-input v-model="params.name" placeholder="昵称/姓名"></el-input>
          </el-form-item>
          <el-form-item label="是否投入基建">
            <el-radio-group v-model="params.capital">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否投入设备">
            <el-radio-group v-model="params.equipment">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="余额">
            <el-input v-model="params.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item label="冻结金额">
            <el-select v-model="params.status" placeholder="请选择">
              <el-option
                v-for="item in statusList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-date-picker
              v-model="params.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="labelBox mt-10">
      <el-row class="line36">
        <el-col :span="4" class="">
          总用户数 <span class="color-red font-26">11111</span>
        </el-col>
        <!-- <el-col :span="4" class="">
          条件满足数 <span class="color-red font-26">112222</span>
        </el-col> -->
        <el-col :span="4" :offset="12">
          <el-button type="warning" @click="dialogVisible = true"
            >新增合伙人</el-button
          >
        </el-col>
      </el-row>
      <el-table
        border
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="store_type" label="序号">
          <template slot-scope="scope">
            <span>{{ returnType(scope.row.store_type, "storetypeList") }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="store_scale" label="合伙人名称">
          <template slot-scope="scope">
            <span>{{
              returnType(scope.row.store_scale, "store_scaleList")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="store_name" label="授权区域" />
        <el-table-column prop="store_topimg" label="授权时间" />
        <el-table-column prop="store_certificates" label="负责人" />
        <el-table-column prop="store_environmental" label="负责人手机" />
        <el-table-column prop="deposit_balance" label="子账号" />
        <el-table-column prop="store_balance" label="关联站点数" />
        <el-table-column prop="frozen_balance" label="关联设备数" />
        <el-table-column prop="phone" label="投入基建（万）" />
        <el-table-column prop="mainbrand" label="投入设备数" />
        <el-table-column prop="address" label=" 余额（元）" />
        <el-table-column prop="companyname" label="冻结金额（元）" />
        <el-table-column prop="bussinesstime" label="待验收解冻金额（元）" />
        <el-table-column prop="isgover" label="状态" />
        <el-table-column prop="store_status" label="操作" />
      </el-table>
      <div class="block mt-20">
        <el-row justify="center" type="flex">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                placeholder="选择时间"
                v-model="ruleForm.date2"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
          <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      storetype: "0",
      total: 0,
      params: {
        status: null,
        phone: "",
        name: "",
        capital: "", //基建
        equipment: "", //设备
        time: "",
      },
      statusList: [
        {
          id: 0,
          name: "正常",
        },
        {
          id: 1,
          name: "冻结",
        },
        {
          id: 2,
          name: "注销",
        },
      ],
      storetypeList: [
        {
          id: "0",
          name: "美护保精品供应商",
        },
        {
          id: "1",
          name: "7迈车直营养护",
        },
        {
          id: "2",
          name: "车源商",
        },
        {
          id: "3",
          name: "汽贸店",
        },
        {
          id: "4",
          name: "4s店",
        },
        {
          id: "5",
          name: "7迈直营",
        },
        {
          id: "6",
          name: "7迈直营美护保",
        },
        {
          id: "7",
          name: "主机厂",
        },
        {
          id: "8",
          name: "养护门店",
        },
        {
          id: "9",
          name: "自助洗车普通加盟商",
        },
        {
          id: "10",
          name: "自助洗车普通代理商",
        },
        {
          id: "11",
          name: "自助洗车合作加盟商",
        },
      ],
      store_scaleList: [
        { id: 0, name: "旗舰店" },
        { id: 1, name: "体验店" },
        { id: 2, name: "中心店" },
      ],
      dialogVisible: false,
      ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
    
    };
  },
  mounted() {
    // this.StoreGetPageList();
  },
  methods: {
    StoreGetPageList() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        storetype: this.storetype,
      };
      this.$api.storeManage.StoreGetPageList(data).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    returnType(id, type) {
      let name = "";
      this[type].forEach((it) => {
        if (it.id == id) {
          name = it.name;
        }
      });
      return name;
    },
    handleSizeChange(e) {
      this.pageSize = e;
    },
    handleCurrentChange(e) {
      this.pageIndex = e;
    },
    selectStoreType(e) {
      // console.log(e)
      this.storetype = e;
      this.StoreGetPageList();
    },
    onSubmit() {},
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
.wrap {
  width: 100%;
  padding: 10px;
  background: #f5f5f5;
}
.labelBox {
  background: #fff;
  padding: 10px;
}
.block {
  text-align: right;
}
</style>
